<template>
    <div class="log-export">
        <el-card class="searchbar">
            <el-form label-width="90px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="日志类型:">
                            <el-select
                                v-if="searchParams.serverType == 1"
                                v-model="searchParams.logTypes"
                                filterable
                                collapse-tags
                                multiple
                                size="mini"
                            >
                                <el-option v-for="(value, key) in EngineLogType" :key="value" :label="value" :value="key"></el-option>
                            </el-select>
                            <el-select
                                v-else-if="searchParams.serverType == 2"
                                v-model="searchParams.logTypes"
                                filterable
                                collapse-tags
                                multiple
                                size="mini"
                            >
                                <el-option v-for="(value, key) in LogType" :key="value" :label="value" :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="服务类型:">
                            <el-select v-model="searchParams.serverType" size="mini">
                                <el-option
                                    v-for="(value, key) in ServeType"
                                    :key="value"
                                    :label="value"
                                    :value="key"
                                    @click.native="resetOption(key)"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="选择日期:">
                            <el-date-picker
                                v-model="searchParams.dates"
                                type="daterange"
                                value-format="yyyyMMdd"
                                format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                @change="handleDateChange"
                                size="mini"
                                style="width: 100%"
                                :picker-options="pickerOptions"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="padding: 5px 10px 0 10px">
                        <el-button type="primary" size="mini" :loading="loading" @click="handleExport">导出</el-button>
                        <el-button size="mini" @click="reset">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>
<script lang="ts">
import { downLoadFile, downLoadFileEngine } from '@/utils/request';
import { getConfigItem } from '@/utils/tools';
import { getUser } from '@/utils/user-util';
import axios from 'axios';
import { Component, Vue } from 'vue-property-decorator';
import XEUtils from 'xe-utils';

@Component({
    name: 'MenuManage',
    components: {},
})
export default class MenuManage extends Vue {
    searchParams: any = {
        logTypes: ['1'],
        serverType: '1',
        dates: [XEUtils.toDateString(new Date(), 'yyyyMMdd'), XEUtils.toDateString(new Date(), 'yyyyMMdd')],
        startDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'),
        endDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'),
    };

    LogType: any = {
        '1': 'ALL日志',
        '2': '错误日志',
        '3': '警告日志',
        '4': '普通日志',
        '5': '垃圾回收日志',
    } as const;

    EngineLogType: any = {
        '1': 'ALL日志',
        '2': '错误日志',
        '3': '警告日志',
        '4': '普通日志',
        '5': '垃圾回收日志',
        '6': '表初始化日志',
        '7': '数据初始化日志',
        '8': '存储过程初始化日志',
    } as const;

    ServeType: any = {
        '1': '引擎',
        '2': '工作台',
    } as const;

    loading: boolean = false;

    mounted() {}

    async handleExport(): Promise<void> {
        if (!this.searchParams.dates || !this.searchParams.dates.length) {
            this.yh_message_warn('请选择日期!');
            return;
        }
        this.loading = true;
        downLoadFile({
            url: '/system/download/logfile',
            method: 'post',
            data: { ...this.searchParams },
            loading: true,
            loadingMsg: '正在准备导出，请稍后··· ···',
        }).finally(() => {
            this.loading = false;
        });
    }

    handleDateChange(val: any[]): void {
        if (val) {
            this.searchParams.startDate = val[0];
            this.searchParams.endDate = val[1];
        } else {
            this.searchParams.startDate = '';
            this.searchParams.endDate = '';
        }
    }

    reset(): void {
        this.searchParams = {
            logTypes: ['1'],
            serverType: '1',
            dates: [XEUtils.toDateString(new Date(), 'yyyyMMdd'), XEUtils.toDateString(new Date(), 'yyyyMMdd')],
            startDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'),
            endDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'),
        };
    }

    resetOption(key: any): void {
        this.searchParams = {
            logTypes: ['1'],
            serverType: key,
            dates: [XEUtils.toDateString(new Date(), 'yyyyMMdd'), XEUtils.toDateString(new Date(), 'yyyyMMdd')],
            startDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'),
            endDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'),
        };
    }

    pickerOptions = {
        disabledDate(time) {
            const oneMonthAgo = new Date();
            oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
            const today = new Date();
            today.setHours(0, 0, 0, 0); // 设置为今天的起始时刻

            // 如果日期早于一个月前的日期，或者晚于今天（包含今天），则禁用该日期
            return time.getTime() < oneMonthAgo.getTime() || time.getTime() > today.getTime();
        },
    };
}
</script>
<style lang="scss" scoped>
.log-export {
    padding: 0 10px;
    .searchbar {
        margin: 10px 0;
        /deep/ .el-form-item {
            margin: 0;

            .el-form-item__label {
                color: #575757;
                padding: 0;
                // font-size: 12px;
            }

            .el-form-item__content {
                .el-select--mini {
                    width: 100%;
                }

                .el-date-editor.el-input {
                    width: 100%;
                }

                .el-input-group {
                    vertical-align: inherit;
                    display: inline-table;
                }
            }
        }
    }
}
</style>
